<template>
	<view class="container">
		<!-- 引入地不菜单 -->
		<my-bar :current="2"></my-bar>
		<!-- 主要区域 -->
		<view class="indent_box">
			<van-tabs animated sticky color="#1296db" line-height="2" border title-active-color="#1296db" :swipe-threshold="tabs.length" @click="changeTab">
				<van-tab title-style="font-size:24rpx; ;" v-for="item in tabs" :key="item.id" :title="item.title">
					<view class="order_msg" v-for="item in 5" :key="item">
						<view class="top">
							<view class="title">
								服务名称
								<van-icon name="arrow" size="14" />
							</view>
							<text class="status">已完成</text>
						</view>
						<view class="center">
							<view class="center_left">
								<image src="https://img.yzcdn.cn/vant/cat.jpeg" alt="" />
								<view class="message">
									<text>服务人员：未指定</text>
									<text>服务时间：2024-04-26</text>
									<text>下单时间：2024-04-25</text>
								</view>
							</view>
							<view class="center_right">
								<view class="service_rate">
									<van-rate readonly value="3" size="12" />
								</view>
								<view class="price">￥165</view>
							</view>
						</view>
						<view class="bottom">
							<van-button size="mini" plina round>删除订单</van-button>
							<van-button size="mini" plina round>再次下单</van-button>
							<van-button size="mini" plina round>取消订单</van-button>
							<!-- <van-button size="mini" plina round>支付订单</van-button>
							<van-button size="mini" plina round>完成订单</van-button>
							<van-button size="mini" plina round>申请售后</van-button> -->
						</view>
					</view>
				</van-tab>
			</van-tabs>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';

const active = ref(0);
//tab项
const tabs = reactive([
	{ id: 1, title: '全部', type: '0' },
	{ id: 2, title: '待付款', type: '1' },
	{ id: 3, title: '待服务', type: '2' },
	{ id: 4, title: '服务中', type: '3' },
	{ id: 5, title: '已取消', type: '4' },
	{ id: 6, title: '已完成', type: '5' },
	{ id: 7, title: '售后', type: '6' }
]);
//改变tab
const changeTab = (e) => {
	active.value = e.detail.index;
};
</script>

<style lang="scss" scoped>
.container {
	.indent_box {
		.order_msg {
			padding: 30rpx;
			margin: 20rpx;
			box-shadow: 5rpx 8rpx 29rpx -6rpx #bbb;
			border-radius: 10rpx;
			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 15rpx;
				.title {
					font-size: 26rpx;
					font-weight: bold;
				}
				.status {
					font-size: 22rpx;
					color: #aaa;
				}
			}
			.center {
				display: flex;
				justify-content: space-between;
				.center_left {
					display: flex;
					image {
						border-radius: 15rpx;
						width: 120rpx;
						height: 120rpx;
					}
					.message {
						text {
							display: block;
							font-size: 24rpx;
							margin-left: 10rpx;
						}
						text:first-child {
							font-size: 26rpx;
							font-weight: bold;
						}
						text:nth-child(2) {
							margin: 12rpx;
						}
					}
				}
				.center_right {
					.service_rate {
						text {
						}
					}
					.price {
						margin-top: 15rpx;
						font-size: 26rpx;
						text-align: right;
						color: #ff0000;
						font-weight: bold;
					}
				}
			}
			.bottom {
				margin-top: 15rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				:deep(.van-button) {
					margin-left: 10rpx;
				}
			}
		}
	}
}
</style>
